<template>
	<view class="content_list">
		<u-collapse @open="open" :accordion="true" ref="collapse">
			<u-collapse-item :title='`${item.quyu}(${item.data.length})`'
				style="background-color: #f7f9fd;margin-top: 10rpx;" v-for="(item,index) in list" :key="index">
				<view v-if="active!=='全部'">
					<view class="cardItem" v-for="(listItem,listIndex) in item.data" :key="listIndex.objectId"
						@click="goToTab(listItem)">
						<view class="serialNumber">
							<u--text type="primary" bold :text="listItem.name" size="16px"></u--text>
							<span class="time">用地性质：{{listItem.ghyt?listItem.ghyt:'暂未定义'}}</span>
						</view>
						<view class="textContent">
							地块位置：{{listItem.sizhi}}
						</view>

					</view>

				</view>
				<view v-else>
					<view class="cardItem" v-for="(listItem,listIndex) in item.data" :key="listIndex.objectId"
						@click="goToTab(listItem)">
						<view class="serialNumber">
							<u--text type="primary" bold :text="listItem.name" size="16px"></u--text>
							<span class="time">用地性质：{{listItem.ghyt?listItem.ghyt:'暂未定义'}}</span>
						</view>
						<view class="textContent">
							地块位置：{{listItem.sizhi}}
						</view>
						<!-- <view class="textContent">
							土地面积(亩):{{listItem.mianji}}
						</view> -->
					</view>
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script>
	import {
		GetLayersData
	} from "@/utils/initMap.js"
	export default {
		name: "list",
		options: {
			styleIsolation: 'shared'
		},
		props: ['list', 'active'],
		data() {
			return {
				listData: '',
				collVal: 0
			};
		},
		created() {
			this.$watch('active', (newVal) => {
				this.$nextTick(() => {
					this.$refs.collapse.init();
				})
			});
		},
		methods: {
			close() {

			},
			open(e) {},
			change() {

			},
			goToTab(item) {
				// uni.navigateTo({
				// 	url: '/pages/Land/details?objectid=' + item.objectid
				// })
				console.log(item, 'item')
				this.$emit('patternLocalization', item.objectid)
			}
		}
	}
</script>

<style lang="scss">
	.content_list {
		height: calc(100vh - 200rpx);
		width: 100vw;
		background-color: #f8f8f8;
		overflow: auto;
		margin-top: 34px;
	}

	.cardItem {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 8px;
		box-shadow: -1px 1px 16px 1px rgba(0, 0, 0, 0.13);
		// border: 1px solid #000;
		background-color: #fff;
		margin-top: 15px;

		.serialNumber {
			font-size: 16px;
			font-weight: 600;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;

			.time {
				color: #acacac;
				font-weight: 500;
				font-size: 12px;
				flex: 1;
				text-align: right;
				// height: 36px;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
		}

		.textContent {
			margin: 16rpx;
			color: #666;
		}
	}

	.cardItem:nth-child(1) {
		margin-top: 0;
	}

	::v-deep .u-collapse-item__content__text {
		background-color: #f8f8f8;
	}

	::v-deep .u-cell {
		border-left: 6rpx solid #3c9cff;
	}

	::v-deep .u-icon__icon {
		font-size: 32rpx !important;
	}
</style>